<template>
    <div>
        <middle-label v-model="index" v-bind:labels="labels"></middle-label>
        <div>
            <el-card class="content">
                <el-row>
                    <el-col :span="6">
                        <span>采集设备名称：</span>
                        <el-select placeholder="请输入传感器名称" value="" style="width: 200px"></el-select>
                    </el-col>
                    <el-col :span="6">
                        <span>监测体名称： </span>
                        <el-select placeholder="请输入监测体名称" value="" style="width: 200px"></el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button class="black-button">查询</el-button>
                        <el-button type="warning" @click="dialog_flag = true">设置</el-button>
                    </el-col>
                </el-row>
                <el-table :data="table_data" stripe size="small">
                    <el-table-column label="采集设备名称" prop="equipment_name"></el-table-column>
                    <el-table-column label="采集设备标识" prop="device_identifier" width="240px"></el-table-column>
                    <el-table-column label="监测体名称" prop="monitoring_body_name"></el-table-column>
                    <el-table-column label="△X上限" prop="x_ceiling"></el-table-column>
                    <el-table-column label="△Y上限" prop="y_ceiling"></el-table-column>
                    <el-table-column label="△H上限" prop="h_ceiling"></el-table-column>
                    <el-table-column label="创建时间" prop="create_time"></el-table-column>
                    <el-table-column label="操作" prop="operation" width="120px">
                        <template slot-scope="slot">
                            <el-button type="text" size="small">修改</el-button>
                            <el-button type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row type="flex" justify="end">
                    <!-- <el-col :span="10"> -->
                        <el-pagination
                                background
                                layout="prev, pager, next, jumper"
                                :total="8">
                        </el-pagination>
                    <!-- </el-col> -->
                </el-row>
            </el-card>
            <el-dialog
                    title="增加阀值"
                    :visible.sync="dialog_flag"
                    width="25%"
            >
                <el-form ref="form" label-position="left" label-width="120px">
                    <el-form-item label="采集设备名称">
                        <el-select placeholder="请输入采集设备名称" value="" style="display: flex;"></el-select>
                    </el-form-item>
                    <el-form-item label="L最小值">
                        <el-input placeholder="请输入L最小值"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="dialog_flag = false">确定</el-button>
                        <el-button @click="dialog_flag = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import MiddleLabel from "~/components/MiddleLabel";

    export default {
        name: "DryBeachLength",
        components: {
            MiddleLabel
        },
        data() {
            return {
                index: 0,
                labels: ['红色预警', '橙色预警', '黄色预警'],
              //各种检测器
                table_data: [
                    {
                        equipment_name: 'GT-08',
                        device_identifier: 'MONI20170517215113187KQS',
                        monitoring_body_name: '福州灯马穴山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '800mm',
                        create_time: '2019-08-20 15:45:40',
                    },
                    {
                        equipment_name: 'GT-07',
                        device_identifier: 'MONI201705172149306853ZW',
                        monitoring_body_name: '福州大王池山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:34:23',
                    },
                    {
                        equipment_name: 'GT-06',
                        device_identifier: 'MONI20170517215022245943',
                        monitoring_body_name: '福州金瓜山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:34:38',
                    },
                    {
                        equipment_name: 'GT-05',
                        device_identifier: 'MONI201705140048106806UD',
                        monitoring_body_name: '福州天台山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:34:46',
                    },
                    {
                        equipment_name: 'GT-04',
                        device_identifier: 'MONI20170514004742953MGV',
                        monitoring_body_name: '福州马头山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:34:54',
                    },
                    {
                        equipment_name: 'GT-03',
                        device_identifier: 'MONI20170514004610542GLA',
                        monitoring_body_name: '福州启岭山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:35:02',
                    },
                    {
                        equipment_name: 'GT-02',
                        device_identifier: 'MONI20170514004543490Z97',
                        monitoring_body_name: '福州松岩山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:35:13',
                    },
                    {
                        equipment_name: 'GT-01',
                        device_identifier: 'MONI20170514004508023I7L',
                        monitoring_body_name: '福州高垄山坡滑坡点',
                        x_ceiling: '800mm',
                        y_ceiling: '800mm',
                        h_ceiling: '300mm',
                        create_time: '2019-06-24 09:35:31',
                    },

                ],
                dialog_flag: false,
            }
        },
    }
</script>

<style scoped>
    .content {
        height: 82vh;
    }

    .black-button {
        background-color: black;
        color: white
    }
</style>
